<template>
  <div align="center" style="font-size:25px; font-weight: bold"> 行业周报</div>
    <!-- <div align="center"> -->
    <a-tabs tabBarGutter="200px" v-model:activeKey="activeKey">
      
        <a-tab-pane  key="1" tab="虚拟货币">
            <div align="center">
                <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData"  style="width: 80%">
                  <template #footer>
                    <div>
                      <b>ant design vue</b>
                      footer part
                    </div>
                  </template>
                  <template #renderItem="{ item }">
                    <a-list-item key="item.title">
                      <template #actions>
                        <span v-for="{ type } in actions" :key="type">
                          <component v-bind:is="type" style="margin-right: 8px" />
                          {{ text }}
                        </span>
                      </template>
                      <template #extra>
                        <!-- <img
                          width="272"
                          alt="logo"
                          src="item.avatar"
                        /> -->
                        <img 
                        width="272"
                        :src="item.href" />
                      </template>
                      <a-list-item-meta :description="item.description">
                        <template #title>
                          <a :href="item.href">{{ item.title }}</a>
                        </template>
                        <template #avatar><a-avatar :src="item.href" /></template>
                      </a-list-item-meta>
                      {{ item.content }}
                      <h1>
                        <a-rate v-model:value=" item.grade" disabled allow-half />
                      </h1>
                      
                    </a-list-item>
                  
                   
                  </template>
                 
                </a-list>
              </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="大数据算法" >
            <div align="center">
            <a-list item-layout="vertical" size="large" :pagination="pagination" :data-source="listData"  style="width: 80%">
                <template #footer>
                  <div>
                    <b>ant design vue</b>
                    footer part
                  </div>
                </template>
                <template #renderItem="{ item }">
                  <a-list-item key="item.title">
                    <template #actions>
                      <span v-for="{ type } in actions" :key="type">
                        <component v-bind:is="type" style="margin-right: 8px" />
                        {{ text }}
                      </span>
                    </template>
                    <template #extra>
                      <!-- <img
                        width="272"
                        alt="logo"
                        src="item.avatar"
                      /> -->
                      <img 
                      width="272"
                      :src="item.href" />
                    </template>
                    <a-list-item-meta :description="item.description">
                      <template #title>
                        <a :href="item.href">{{ item.title }}</a>
                      </template>
                      <template #avatar><a-avatar :src="item.href" /></template>
                    </a-list-item-meta>
                    {{ item.content }}
                    <h1>
                      <a-rate v-model:value=" item.grade" disabled allow-half />
                    </h1>
                    
                  </a-list-item>
                
                 
                </template>
               
              </a-list>
            </div>



          
              
        </a-tab-pane>
        <a-tab-pane key="3" tab="无人驾驶"></a-tab-pane>
        <a-tab-pane key="4" tab="生物科技"></a-tab-pane>
        <a-tab-pane key="5" tab="人居环境" force-render></a-tab-pane>
        <a-tab-pane key="" tab="新能源"></a-tab-pane>
      </a-tabs>
    <!-- </div> -->
 

</template>
<script>
import { StarOutlined, LikeOutlined, MessageOutlined } from '@ant-design/icons-vue';
import { defineComponent,ref } from 'vue';
const listData = [];

// for (let i = 0; i < 5; i++) {
//   listData.push({
//     href: 'https://www.antdv.com/',
//     title: `ant design vue part ${i}`,
//     avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
//     description:
//       'Ant Design, a design language for background applications, is refined by Ant UED Team.',
//     content:
//       'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
//   });
// }


export default defineComponent({
  components: {
    StarOutlined,
    LikeOutlined,
    MessageOutlined,
  },

  setup() {
    const value = ref(2.5);
    const pagination = {
      onChange: page => {
        console.log(page);
      },
      pageSize: 5,
    };
    const actions = [
      {
        type: 'StarOutlined',
        text: '156',
      },
      {
        type: 'LikeOutlined',
        text: '156',
      },
      {
        type: 'MessageOutlined',
        text: '2',
      },
    ];
    return {
      activeKey: ref('1'),
      listData,
      pagination,
      actions,
      value,
        listData: ref([

    {href: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
    title: `区块链双周报 `,
    grade:'5',
    avatar: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
    description:
      '区块链将如何应用在新闻传播领域',
    content:
      '时间戳和哈希算法等区块链核心技术可以对新闻内容版权进行有效保护。运用时间戳能够给数据区块打上的公开可见的时间烙印，哈希算法则是一种不可逆的算法机制，确保区块链中的交易数据难以被篡改。当区块链应用到新闻传播系统后，新闻内容收集、编写、分发等每一步的信息都会通过哈希算法转换成哈希值，用时间戳和上一步的哈希值进行标记，在区块头中进行',
    },
    {href: 'https://storage.djyanbao.com/sys/8/daf4c7d0-0653-11ec-8371-912f48695b55.png?x-oss-process=image/resize,w_178,h_228',
    title: `区块链新闻报 `,
    grade:'4.5',
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    description:
      '未来区块链如何与新闻传播协同发展',
    content:
      '作家阿瑟·克拉克曾说过：“任何足够先进的技术都等同于魔术。”区块链的应用给新闻传播业带来了前所未有的机遇。未来，在新闻生产、编辑、分发、版权保护等领域都可嵌入相关区块链技术',
    },
     {href: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
    title: `区块链双周报 `,
    grade:'4',
    avatar: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
    description:
      '区块链将如何应用在新闻传播领域',
    content:
      '时间戳和哈希算法等区块链核心技术可以对新闻内容版权进行有效保护。运用时间戳能够给数据区块打上的公开可见的时间烙印，哈希算法则是一种不可逆的算法机制，确保区块链中的交易数据难以被篡改。当区块链应用到新闻传播系统后，新闻内容收集、编写、分发等每一步的信息都会通过哈希算法转换成哈希值，用时间戳和上一步的哈希值进行标记，在区块头中进行',
    },
    {href: 'https://storage.djyanbao.com/sys/8/daf4c7d0-0653-11ec-8371-912f48695b55.png?x-oss-process=image/resize,w_178,h_228',
    title: `区块链新闻报 `,
    grade:'3',
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    description:
      '未来区块链如何与新闻传播协同发展',
    content:
      '作家阿瑟·克拉克曾说过：“任何足够先进的技术都等同于魔术。”区块链的应用给新闻传播业带来了前所未有的机遇。未来，在新闻生产、编辑、分发、版权保护等领域都可嵌入相关区块链技术',
    },


  ]),

          listData2: ref([

{href: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
title: `区块链双周报 `,
grade:'4',
avatar: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
description:
  '区块链将如何应用在新闻传播领域',
content:
  '时间戳和哈希算法等区块链核心技术可以对新闻内容版权进行有效保护。运用时间戳能够给数据区块打上的公开可见的时间烙印，哈希算法则是一种不可逆的算法机制，确保区块链中的交易数据难以被篡改。当区块链应用到新闻传播系统后，新闻内容收集、编写、分发等每一步的信息都会通过哈希算法转换成哈希值，用时间戳和上一步的哈希值进行标记，在区块头中进行',
},
{href: 'https://storage.djyanbao.com/sys/8/daf4c7d0-0653-11ec-8371-912f48695b55.png?x-oss-process=image/resize,w_178,h_228',
title: `区块链新闻报 `,
grade:'4.5',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
description:
  '未来区块链如何与新闻传播协同发展',
content:
  '作家阿瑟·克拉克曾说过：“任何足够先进的技术都等同于魔术。”区块链的应用给新闻传播业带来了前所未有的机遇。未来，在新闻生产、编辑、分发、版权保护等领域都可嵌入相关区块链技术',
},
 {href: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
title: `区块链双周报 `,
grade:'4',
avatar: 'https://storage.djyanbao.com/sys/1/56f72030-fe7f-11eb-9568-6d4c0c07a07d.png',
description:
  '区块链将如何应用在新闻传播领域',
content:
  '时间戳和哈希算法等区块链核心技术可以对新闻内容版权进行有效保护。运用时间戳能够给数据区块打上的公开可见的时间烙印，哈希算法则是一种不可逆的算法机制，确保区块链中的交易数据难以被篡改。当区块链应用到新闻传播系统后，新闻内容收集、编写、分发等每一步的信息都会通过哈希算法转换成哈希值，用时间戳和上一步的哈希值进行标记，在区块头中进行',
},
{href: 'https://storage.djyanbao.com/sys/8/daf4c7d0-0653-11ec-8371-912f48695b55.png?x-oss-process=image/resize,w_178,h_228',
title: `区块链新闻报 `,
grade:'3',
avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
description:
  '未来区块链如何与新闻传播协同发展',
content:
  '作家阿瑟·克拉克曾说过：“任何足够先进的技术都等同于魔术。”区块链的应用给新闻传播业带来了前所未有的机遇。未来，在新闻生产、编辑、分发、版权保护等领域都可嵌入相关区块链技术',
},


]),
    };
  },
});
</script>
<style >

.ant-tabs-nav .ant-tabs-tab {
  font-weight: bold;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    height: 100%;
    margin: 0 32px 0 0;
    padding: 12px 16px;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    /* align-content: center;
    align-items: center;
    align-self: center; */
}
</style>